<template>
  <div class="area-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="tree-wrapper" :span="4">
        <left-tree></left-tree>
      </a-col>
      <a-col class="listContent-wrapper" :span="20">
        <div class="l-w_content" style="position: relative">
          <div class="add-btn cursor" @click="handelAdd" style="width: auto; padding: 0 0.1rem">新增处罚记录</div>
          <top-title :updateTime="true" :content="content"></top-title>
          <div class="search-group">
            <div class="input-wrap">
              <div class="label">餐厅名称:</div>
              <div class="input-item">
                <j-input :maxLength="30" v-model="queryParam.restaurantName" placeholder="请填写餐厅名称" />
              </div>
            </div>

            <div class="input-wrap">
              <div class="label">餐厅规模:</div>
              <div class="input-item">
                <a-select
                  ref="select"
                  style="width: 100%"
                  placeholder="请选择餐厅规模"
                  v-model="queryParam.restaurantScale"
                >
                  <a-select-option v-for="(item, index) in restaurant_scale" :key="index" :value="item.value">
                    {{ item.text }}
                  </a-select-option>
                </a-select>
              </div>
            </div>

            <div class="input-wrap">
              <div class="label">餐厅类型:</div>
              <div class="input-item">
                <a-select
                  ref="select"
                  style="width: 100%"
                  placeholder="请选择餐厅类型"
                  v-model="queryParam.restaurantType"
                >
                  <a-select-option v-for="(item, index) in restaurant_type" :key="index" :value="item.value">
                    {{ item.text }}
                  </a-select-option>
                </a-select>
              </div>
            </div>

            <div class="input-wrap">
              <div class="label">餐厅负责人:</div>
              <div class="input-item">
                <j-input :maxLength="30" v-model="queryParam.restaurantChargeName" placeholder="请填写餐厅负责人" />
              </div>
            </div>

            <div class="input-wrap">
              <div class="label">负责人电话:</div>
              <div class="input-item">
                <j-input
                  :maxLength="30"
                  v-model="queryParam.restaurantChargePhone"
                  placeholder="请填写餐厅负责人电话"
                />
              </div>
            </div>

            <div class="input-wrap">
              <div class="label">处罚结果:</div>
              <div class="input-item">
                <j-input :maxLength="30" v-model="queryParam.penaltyResult" placeholder="请填写处罚结果" />
              </div>
            </div>

            <div class="input-wrap">
              <div class="label">处罚时间:</div>
              <div class="time-item">
                <start-end-time
                  :times="times"
                  :showTime="{ format: 'HH:mm:ss' }"
                  format="YYYY-MM-DD HH:mm:ss"
                  @timeChange="timeChange"
                  :resetTime="resetTime"
                ></start-end-time>
              </div>
            </div>

            <div class="btn-wrap">
              <a-button
                class="searchBtn"
                @click="searchQuery(queryParam.penaltyTime_begin, queryParam.penaltyTime_end)"
                type="primary"
              >
                搜索
              </a-button>
              <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
            </div>
          </div>

          <div class="table-wrap">
            <a-table
              rowKey="id"
              class="tableList"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              @change="handleTableChange"
            >
              <template #restaurantScale="record">
                <span v-if="record.restaurantScale == 1">小型</span>
                <span v-else-if="record.restaurantScale == 2">中型</span>
                <span v-else-if="record.restaurantScale == 3">大型</span>
              </template>
              <template #personName="record">
                <span>
                  <!-- {{ record.personName '、' +}} -->
                  {{ record.personNameList.length ? record.personNameList.join('、') : '' }}
                </span>
              </template>
              <template #status="record">
                <span v-if="record.status == 1">合格</span>
                <span v-else-if="record.status == 2">不合格</span>
              </template>
              <template #restaurantType="records">
                <span>{{ getDictByType(restaurant_type, records.restaurantType) }}</span>
              </template>
              <template v-slot:action="records">
                <span class="operation deatil-color" @click="detailsHandle(records)">详情</span>
              </template>
            </a-table>
          </div>
        </div>
      </a-col>
    </a-row>

    <detail-modal ref="detailModal"></detail-modal>
    <addEdit-modal ref="addEditModal" @refresh="searchQuery"></addEdit-modal>
  </div>
</template>

<script>
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import JInput from '@/components/jeecg/JInput'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapState } from 'vuex'
import detailModal from './modules/detailModal'
import addEditModal from './modules/addEditModal'
import { ajaxGetDictItems } from '@/api/api'
import { getAction } from '@/api/manage'
import startEndTime from '@/components/startEndTime'

export default {
  name: 'area-index',
  components: { leftTree, topTitle, detailModal, addEditModal, startEndTime, JInput },
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '/restaurant/punish_record/page',
        tree: true,
      },
      content: [['处罚记录列表']],
      publicVisible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '餐厅名称',
          dataIndex: 'restaurantName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '餐厅规模',
          scopedSlots: { customRender: 'restaurantScale' },
          // dataIndex: 'restaurantScale_dictText',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '餐厅类型',
          scopedSlots: { customRender: 'restaurantType' },
          // dataIndex: 'restaurantType',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '餐厅负责人',
          dataIndex: 'restaurantChargeName',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '负责人电话',
          dataIndex: 'restaurantChargePhone',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '执法队员',
          scopedSlots: { customRender: 'personName' },
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处罚结果',
          dataIndex: 'penaltyResult',
          // scopedSlots: { customRender: 'status' },
          align: 'center',
          ellipsis: true,
        },
        {
          title: '添加时间',
          dataIndex: 'createTime',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '操作',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'action' },
        },
      ],
      restaurant_scale: [],
      restaurant_type: [],
    }
  },
  computed: {
    ...mapState({
      isAgencyId: (state) => state.user.isAgencyId,
    }),
  },
  watch: {
    isAgencyId(v) {
      this.queryParam.unitId = v.id ? v.id : ''
      this.searchQuery()
    },
  },

  mounted() {
    if (this.$route.query) {
      this.queryParam = { ...this.$route.query }
      setTimeout(() => this.searchQuery(), 1000)
    }
    this.statusDict()
  },
  activated() {
    if (this.$route.query) {
      this.queryParam = { ...this.$route.query }
      setTimeout(() => this.searchQuery(), 1000)
    }
  },
  methods: {
    handelAdd() {
      let records = {
        unitId: this.queryParam.unitId,
      }
      this.$refs.addEditModal.show(records)
    },

    async statusDict() {
      let { result: restaurant_scale } = await ajaxGetDictItems({ code: 'restaurant_scale' })
      this.restaurant_scale = restaurant_scale

      let { result: restaurant_type } = await ajaxGetDictItems({ code: 'restaurant_type' })
      this.restaurant_type = restaurant_type
    },

    getDictByType(arr, value) {
      const foundObject = arr.find((obj) => obj.value == value)
      return foundObject ? foundObject.text : '暂无'
    },

    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.penaltyTime_begin = this.$moment(v).valueOf()
      } else {
        this.queryParam.penaltyTime_end = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.penaltyTime_begin = null
        this.queryParam.penaltyTime_end = null
      }
    },

    detailsHandle(records) {
      this.$refs.detailModal.show(records)
    },
  },
}
</script>
<style lang="less" scoped>
.area-index {
  width: 100%;
  height: 100%;
}
</style>
